<template>
    <div class="map-box">
        <div class="map-head">
            <ul class="map-txt">
                <li v-for="(item, index) in 4" :key="index">
                    <!-- <span>{{ fn('小美') }}</span> -->
                    <span>111</span>
                    <!-- <span>累计确诊{{ fns('小伟') }}</span> -->
                    <span>累计确诊</span>
                </li>
            </ul>
        </div>
        <div class="btn-box">
            <button :class="['map-btn', { active: index === color }]" v-for="(item, index) in ['累计确诊', '现存确诊']"
                :key="index" @click="onBtn(index)">{{ item
                }}</button>
        </div>
        <div :class="[item]" v-for="(item, index) in ['mapTe1', 'mapTe2', 'mapTe3']" :key="index">
        </div>

        <div class="map-footer" ref="mapFooter">

        </div>
    </div>
</template>

<script setup>
import { ref, nextTick, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { options7 } from "@/common/options.js"
import { addChart } from "@/common/echartsInit.js"
const color = ref(0);
const onBtn = index => color.value = index
const mapFooter = ref(null)
onMounted(() => {
    nextTick(() => {
        addChart(mapFooter.value, options7())
    })
})


// const fn = computed(() => a => '我是' + a)
// const fns = computed(() => vm => '我是' + vm)
const arr = [{
    name: '小伟',
    id: '1'
}, {
    name: '小美',
    id: '2'
}, {
    name: '小王',
    id: '3'
}]

// ['3']
function fnss() {
    // var newArr = arr.map((s) => s.id)
    // console.log(newArr)
}
fnss()



</script>
<style scoped lang="scss">
.map-box {
    // height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.map-head {
    display: flex;
    border: 1px solid #144567;
    flex: 1;

    .map-txt {
        width: 100%;
        flex: 2;
        display: flex;
        justify-content: center;
        color: #fff;

        li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    }
}



.btn-box {
    position: absolute;
    top: 12%;
    left: 0;
    width: 100%;
    z-index: 999;

    .map-btn {
        width: 200px;
        height: 70px;
        border-radius: 50px;
        background-color: rgba($color: #48759c, $alpha: .5);
        border: none;
        color: #fff;
        font-size: 30px;
        margin-left: 19.5%;

    }

    .active {
        color: yellow;
    }


}

.map-footer {
    flex: 10;
}

.mapTe1 {
    width: 578px;
    height: 472px;
    background: url("@/assets/image/map.png");
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    opacity: 0.5;
    top: 57%;
    transform: translate(-39%, -57%);
    background-size: 80%;
}

.mapTe2 {
    width: 530px;
    height: 530px;
    background: url("@/assets/image/jt.png");
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    opacity: 0.7;
    top: 53%;
    transform: translate(-40%, -57%);
    background-size: 100%;
    animation: mapTe2 4s linear infinite;
    transform-origin: center;
}

.mapTe3 {
    width: 610px;
    height: 610px;
    background: url(../../assets/image/lbx.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    opacity: 0.9;
    top: 53%;
    transform: translate(-50%, -55%);
    background-size: 100%;
    animation: mapTe3 4s linear infinite;
    transform-origin: center;
}

@keyframes mapTe3 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes mapTe2 {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
</style>